import React,{useState,useEffect} from 'react'
import './home.css'
import { TabBar } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import { Outlet,useNavigate } from 'react-router-dom'
function Home() {
  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: 'todo',
      title: '名医',
      icon: <UnorderedListOutline />,
    },
    {
      key: '/home/medical',
      title: '医说',
      icon: <MessageOutline />,
    },
    {
      key: 'personalCenter',
      title: '我的',
      icon: <UserOutline />,
    },
  ]
  const [active, setActive] = useState('home')
  const navigate=useNavigate()
  function setRouteActive(key){
    navigate(key)
  }
  return (
    <div className='butt'>
       <TabBar style={{position:'fixed',bottom:'0',background:'white'}} activeKey={active}
       onChange={setActive} className='tabbar'>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
        <Outlet></Outlet>
    </div>
  )
}
export default Home